js节流与防抖,防止重复提交、防止频繁重复点击 |
您所在的位置:网站首页 › reactbutton 按钮只提交一次 › js节流与防抖,防止重复提交、防止频繁重复点击 |
一、节流、防止短时间多次提交操作
现有一提交按钮提交点击后提交表单信息。 但是经常会出现: 1.不小心点了多次,就提交了多次 2.网络卡顿的时候网页没反应,用户频繁点击的情况 // 即这种写法: var subBtn = document.getElementById('submit'); subBtn.addEventListener('click', ajaxForm, false) // 提交方法 function ajaxForm(e) { console.log(e.target) console.log('执行提交操作', new Date().getTime()) }通过添加节流函数来解决 /*节流函数,通过控制每次事件执行的时间间隔控制短时间多次执行方法 handler:要执行的方法 wait:每次点击事件执行的时间间隔(毫秒) */ function throttle(handler, wait) { var lastTime = 0; return function () { var nowTime = new Date().getTime(); if (nowTime - lastTime > wait) { handler.apply(this, arguments); lastTime = nowTime; } } } // 提交方法 function ajaxForm(e) { console.log(e.target) console.log('执行提交操作', new Date().getTime()) } var subBtn = document.getElementById('submit'); subBtn.addEventListener('click', throttle(ajaxForm, 1000), false) 二、防抖动
应用场景:模糊查询,根据输入内容提示相关完整内容 (浏览器必备功能) 不好的写法: function showAll(e) { console.log(e.target) console.log('执行查询操作', new Date().getTime()) } var searchInput = document.getElementById('search'); searchInput.addEventListener('keyup', showAll, false)例:查询 ESP(我们并不想查询E或者ES),会执行三次,无论输入多快 通过添加防抖函数来优化查询体验 /*防抖函数,通过推迟每次事件执行的时间来减少不必要的查询 handler:要执行的方法 delay:每次事件执行的推迟时间(毫秒) */ function debounce(handler, delay) { var timer; return function () { var self = this, arg = arguments; clearTimeout(timer); timer = setTimeout(function () { handler.apply(self, arg) }, delay) } } function showAll(e) { console.log(e.target) console.log('执行查询操作', new Date().getTime()) } var searchInput = document.getElementById('search'); searchInput.addEventListener('keyup', debounce(showAll, 500), false)查询 ESP,输入较快的情况只会执行一次查询ESP
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |